<!DOCTYPE html>
<html>
  <head>
    <title>Flask Template Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/tachyons@4.10.0/css/tachyons.min.css"/>
    <style>
        input[type='text'], select{
            width: 300px;
        }
        a,a:visited {
            text-decoration: none;
            color:#FEF;
        }
    </style>
  </head>
  <body>
      <div class="bg-black washed-blue pa2">
          <a href="/" target="_self">
            <h1>Text2Audio</h1>
        </a>
      </div>
      
    <div class="fl w-100 pa5">
        <div class="fl w-10">
            <p />
        </div>

        <div class="fl w-80" >
            <form action = "/convert-text-to-speech" method = "POST">
                
                <div class="mt3 fl w-100">
                    <h2 for="age">Content</h2>
                </div>
                <div class="mt3 fl w-100">
                   <textarea name="content" class="fl w-100 pa2" rows="20">{{content}}</textarea>
                </div>

                <div class="mt3 fl w-100">
                    Voice Name: <select name="VoiceId">
                        <option value="Aditi" selected="selected">Aditi</option>
                        <option value="Raveena" >Raveena</option>
                        <option value="Ivy">Ivy</option>
                        <option value="Joanna">Joanna</option>
                        <option value="Kendra">Kendra</option>
                        <option value="Kimberly">Kimberly</option>
                        <option value="Salli">Salli</option>
                        <option value="Joey">Joey</option>
                        <option value="Justin">Justin</option>
                        <option value="Matthew">Matthew</option>
                    </select>
                    <input type="submit" value="Convert Text to Audio" class="ml2">
                </div>
               {% if filename is not none %}
                <div class="mt3 fl w-100">
                    <audio controls>
                        <source src="{{ url_for('static', filename = filename) }}" type="audio/mpeg">
                    </audio>
                </div>
                {% endif %}

            </form>
        </div>

        <div class="fl w-10">
            <p ></p>
        </div>
    </div>
  </body>
</html>